<template>
	<view>
		<u-modal :class="{ show: start }" @click="$emit('update:start', false)">
			<view id="capture" class="cu-dialog bgw relative" style=" width: 100vw; height: 100vh;">
				<view class="draw" ref="capture">
					<slot></slot>	
				</view>
				<img class="absolute" style="top: 0; left: 0;" :src="src" />
			</view>
		</u-modal>
	</view>
</template>

<script>
	// #ifdef H5
	import html2canvas from 'html2canvas'
	// #endif
	// #ifndef H5
	import wxml2canvas from '@/utils/wxml2canvas'
	// #endif
	
	export default {
		data() {
			return {
				src: ''
			}
		},
		props:{
			start: {
				type: Boolean,
				default: false,
			}
		},
		beforeCreate() {
			uni.showLoading({
				// #ifdef H5
				title: '' ,
				// #endif
				// #ifndef H5
				title: '生成中' ,
				// #endif
			})
		},
		mounted() {
			this.init()
		},
		methods: {
			init(){
				uni.createSelectorQuery().selectViewport().scrollOffset(res => {
					// #ifdef H5
					html2canvas(this.$refs.capture.$el, {
						y: res.scrollTop, useCORS: true, allowTaint: true
					}).then(canvas => {
						this.src = canvas.toDataURL()
						uni.hideLoading()
					})
					// #endif
					// #ifndef H5
					wxml2canvas('#capture', '.draw', 'canvas-map').then(() => {
						uni.hideLoading()
					})
					// #endif
				}).exec();
			}
		}
	}
</script>

<style>
</style>
